<template>
  <el-card class="box-card">
    员工管理
    <hr>
    <br>
    <el-row style="display: flex;justify-content: flex-start;">
      <!--搜索框-->
      <span style="">
        <el-input v-model="keyword" style="width: 200px" placeholder="请输入员工名"
                  size="mini"></el-input>
        <el-button type="success" @click="selectTable" icon="el-icon-search"
                   size="mini">搜索</el-button>
      </span>
      <!--新增按钮-->
      <span style="display: inline-block;margin-left: 30px">
        <el-button type="primary" icon="el-icon-circle-plus-outline"
                   @click="addDialog" size="mini"
                   round>新增
        </el-button>
      </span>
    </el-row>
    <br>
    <br>
    <!--表格数据及操作-->
    <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable"
              tooltip-effect="dark">
      <!--索引-->
      <el-table-column type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="employeeName" label="姓名" sortable>
      </el-table-column>
      <el-table-column prop="photoUrl" label="员工照片" width="60">
        <template slot-scope="scope">
          <img :src="scope.row.photoUrl" id="ep"/>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 0">女</span>
          <span v-if="scope.row.sex == 1">男</span>
        </template>
      </el-table-column>
      <el-table-column prop="birth" label="出生日期" :formatter="dateForma" width="150">
      </el-table-column>
      <el-table-column prop="idNo" label="身份证号">
      </el-table-column>
      <el-table-column prop="maritalStatus" label="婚姻状态">
        <template slot-scope="scope">
          <span v-if="scope.row.maritalStatus == 0">未婚</span>
          <span v-if="scope.row.maritalStatus == 1">已婚</span>
        </template>
      </el-table-column>
      <el-table-column prop="nation" label="民族">
      </el-table-column>
      <el-table-column prop="politicCountenance" label="政治面貌">
        <template slot-scope="scope">
          <span v-if="scope.row.politicCountenance == 0">团员</span>
          <span v-if="scope.row.politicCountenance == 1">党员</span>
          <span v-if="scope.row.politicCountenance == 2">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column prop="deptName" label="部门">
      </el-table-column>
      <el-table-column prop="positionName" label="职位">
      </el-table-column>
      <el-table-column prop="academicTitle" label="职称">
      </el-table-column>
      <el-table-column prop="educationalBackground" label="教育背景">
        <template slot-scope="scope">
          <span v-if="scope.row.educationalBackground == 0">大专</span>
          <span v-if="scope.row.educationalBackground == 1">本科</span>
          <span v-if="scope.row.educationalBackground == 2">博硕</span>
          <span v-if="scope.row.educationalBackground == 3">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="school" label="毕业学校">
      </el-table-column>
      <el-table-column prop="entryTime" label="入职时间" :formatter="dateForma" width="150">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status"
                     disabled
                     active-value="1"
                     inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="contractTerm" label="合同期" :formatter="dateForma" width="150">
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editThis(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeThis(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>

    <!--分页条-->
    <el-pagination
      style="padding-top:15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="添加新员工" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="员工姓名">
          <el-input v-model="form.employeeName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex" size="medium">
            <el-radio border label="0">女</el-radio>
            <el-radio border label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="请选择出生日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form.idNo" placeholder="请输入身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="婚姻状态">
          <el-select v-model="form.maritalStatus" placeholder="请选择">
            <el-option
              v-for="m in maritalStatusList"
              :key="m.key"
              :label="m.label"
              :value="m.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="form.nation" placeholder="请输入民族"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-select v-model="form.politicCountenance" placeholder="请选择">
            <el-option
              v-for="p in politicCountenance"
              :key="p.key"
              :label="p.label"
              :value="p.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="form.deptId" placeholder="请选择">
            <el-option
              v-for="dept in deptList"
              :key="dept.id"
              :label="dept.deptName"
              :value="dept.id">{{dept.deptName}}
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.positionName" placeholder="请输入职位"></el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="form.academicTitle" placeholder="请输入职称"></el-input>
        </el-form-item>
        <el-form-item label="教育背景">
          <el-select v-model="form.educationalBackground" placeholder="请选择">
            <el-option
              v-for="e in educationalBackground"
              :key="e.key"
              :label="e.label"
              :value="e.key">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="毕业学校">
          <el-input v-model="form.school" placeholder="请输入毕业学校"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="form.entryTime"
            type="date"
            placeholder="请选择入职时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同期">
          <el-date-picker
            v-model="form.contractTerm"
            type="date"
            placeholder="请选择合同期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="员工状态">
          <el-switch v-model="switchon"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNew">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改员工信息" :visible.sync="editdialog">
      <el-form :model="form">
        <el-form-item label="员工姓名">
          <el-input v-model="form.employeeName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:8080/upload/employeePhotoUpload"
          :show-file-list="false"
          :headers="myHeaders"
          :data="{id:form.id}"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex" size="medium">
            <el-radio border label="0">女</el-radio>
            <el-radio border label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="请选择出生日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form.idNo" placeholder="请输入身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="婚姻状态">
          <el-select v-model="form.maritalStatus" placeholder="请选择">
            <el-option
              v-for="m in maritalStatusList"
              :label="m.label"
              :value="m.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="form.nation" placeholder="请输入民族"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-select v-model="form.politicCountenance" placeholder="请选择">
            <el-option
              v-for="p in politicCountenance"
              :label="p.label"
              :value="p.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="form.deptId" placeholder="请选择">
            <el-option
              v-for="dept in deptList"
              :key="dept.id"
              :label="dept.deptName"
              :value="dept.id">{{dept.deptName}}
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.positionName" placeholder="请输入职位"></el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="form.academicTitle" placeholder="请输入职称"></el-input>
        </el-form-item>
        <el-form-item label="教育背景">
          <el-select v-model="form.educationalBackground" placeholder="请选择">
            <el-option
              v-for="e in educationalBackground"
              :key="e.key"
              :label="e.label"
              :value="e.key">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="毕业学校">
          <el-input v-model="form.school" placeholder="请输入毕业学校"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="form.entryTime"
            type="date"
            placeholder="请选择入职时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同期">
          <el-date-picker
            v-model="form.contractTerm"
            type="date"
            placeholder="请选择合同期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="员工状态">
          <el-switch v-model="switchon"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">取 消</el-button>
        <el-button type="primary" @click="updThis">确 定</el-button>
      </div>
    </el-dialog>


  </el-card>
</template>

<script>
  import moment from 'moment'

  export default {
    name: "employee",
    data() {
      return {
        tableData: [],   //表格数据
        keyword: '',   //查询输入框数据
        total: 0, // 总条数
        pageSize: 10,     // 每页显示的条数
        current: 1,  // 当前页码
        imageUrl: "",
        myHeaders: {Authorization: localStorage.getItem('token')},
        maritalStatusList: [
          {
            key: "1",
            label: "已婚"
          }, {
            key: "0",
            label: "未婚"
          }
        ],
        politicCountenance: [
          {
            key: "0",
            label: "团员"
          }, {
            key: "1",
            label: "党员"
          }, {
            key: "2",
            label: "其他"
          }
        ],
        educationalBackground: [
          {
            key: "0",
            label: "大专"
          }, {
            key: "1",
            label: "本科"
          }, {
            key: "2",
            label: "博硕"
          }, {
            key: "3",
            label: "其他"
          }
        ],
        form: {
          employeeName: '',
          sex: '',
          birth: '',
          idNo: '',
          maritalStatus: '',
          nation: '',
          politicCountenance: '',
          email: '',
          phone: '',
          address: '',
          deptId: '',
          positionName: '',
          academicTitle: '',
          educationalBackground: '',
          school: '',
          entryTime: '',
          status: '',
          contractTerm: '',
          createBy: '',
          id: ""
        },
        dialogFormVisible: false,
        editdialog: false,
        switchon: true,
        editSwitchon: true,
        deptList: [],
        trsValue: [],
        thisUserId: ""
      }
    },
    methods: {
      /**
       * 日期格式化
       * @param row
       * @param column
       * @returns {string}
       */
      dateForma(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD")
      },
      /**
       * 表格索引
       * @param index
       * @returns {*}
       */
      indexMethod(index) {
        return index;
      },
      /**
       * 监听数据表格每页条数变化并更新表格数据
       * @param val
       */
      handleSizeChange(val) {
        this.getTableDate(val, this.current, null);
      },
      /**
       * 监听页码变化并更新表格
       * @param val
       */
      handleCurrentChange(val) {
        this.getTableDate(this.limit, val, null);
      },
      /**
       * 关键字查询
       */
      selectTable() {
        this.getTableDate(this.limit, this.current, this.keyword);
      },
      /**
       * 获取表格数据
       * @param limit
       * @param page
       * @param keyword
       */
      getTableDate(limit, page, keyword) {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employee/listAllEmployee',
          data: {
            limit: limit,
            page: page,
            employeeName: keyword
          }
        }).then((response) => {
          if (response.data.msg != "SUCCESS") {
            this.$message.error(response.data.msg);
          }
          var redata = response.data.data.records;
          for (let i = 0; i < redata.length; i++) {
            redata[i].photoUrl = 'http://127.0.0.1:8080/upload/showPhoto?fileName=' + redata[i].photoUrl
          }
          this.tableData = redata;
          console.log(this.tableData);
          this.total = response.data.data.total; //totalcount
          this.current = response.data.data.current; //页数
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 添加新员工
       */
      addNew() {
        if (this.switchon == true) {
          this.form.status = 1
        } else {
          this.form.status = 0
        }
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employee/addEmployee',
          data: {
            employeeName: this.form.employeeName,
            sex: this.form.sex,
            birth: this.form.birth,
            idNo: this.form.idNo,
            maritalStatus: this.form.maritalStatus,
            nation: this.form.nation,
            politicCountenance: this.form.politicCountenance,
            email: this.form.email,
            phone: this.form.phone,
            address: this.form.address,
            deptId: this.form.deptId,
            positionName: this.form.positionName,
            academicTitle: this.form.academicTitle,
            educationalBackground: this.form.educationalBackground,
            school: this.form.school,
            entryTime: this.form.entryTime,
            status: this.form.status,
            contractTerm: this.form.contractTerm,
            createBy: localStorage.getItem("uId")
          }
        }).then((response) => {

          if (response.data.msg == "添加成功！") {
            this.$message.success(response.data.msg);
            this.clearValue()
            this.dialogFormVisible = false;
            this.getTableDate(this.pageSize, this.current);
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 删除当前员工
       * @param row
       */
      removeThis(row) {
        this.$axios({
          method: 'delete',
          url: 'http://127.0.0.1:8080/employee/delEmployee?id=' + row.id,
        }).then((response) => {
          if (response.data.msg == "删除成功！") {
            this.$message.success(response.data.msg);
            this.getTableDate(this.pageSize, this.current);
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 打开添加弹出层
       */
      addDialog() {
        this.clearValue()
        this.dialogFormVisible = true;
      },
      /**
       * 打开编辑弹出层
       * @param row
       */
      editThis(row) {
        this.clearValue()
        if (row.photoUrl != null || row.photoUrl != "") {
          this.imageUrl = 'http://127.0.0.1:8080/upload/showPhoto?fileName=' + row.photoUrl
        } else {
          this.imageUrl = "https://img0.baidu.com/it/u=3640332497,3089915405&fm=26&fmt=auto&gp=0.jpg"
        }
        this.editdialog = true;
        this.form.id = row.id;
        this.form.employeeName = row.employeeName;
        this.form.sex = row.sex;
        this.form.birth = row.birth;
        this.form.idNo = row.idNo;
        this.form.maritalStatus = row.maritalStatus;
        this.form.nation = row.nation;
        this.form.politicCountenance = row.politicCountenance;
        this.form.email = row.email;
        this.form.phone = row.phone;
        this.form.address = row.address;
        this.form.deptId = row.deptId;
        this.form.positionName = row.positionName;
        this.form.academicTitle = row.academicTitle;
        this.form.educationalBackground = row.educationalBackground;
        this.form.school = row.school;
        this.form.entryTime = row.entryTime;
        this.form.status = row.status;
        this.form.contractTerm = row.contractTerm;
        if (row.status == 0) {
          this.form.status = false;
          this.editSwitchon = false
        } else {
          this.form.status = true;
          this.editSwitchon = true;
        }
      },
      /**
       * 更新当前员工
       */
      updThis() {
        if (this.switchon == true) {
          this.form.status = 1
        } else {
          this.form.status = 0
        }
        this.$axios({
          method: 'put',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employee/updEmployee',
          data: {
            id: this.form.id,
            employeeName: this.form.employeeName,
            sex: this.form.sex,
            birth: this.form.birth,
            idNo: this.form.idNo,
            maritalStatus: this.form.maritalStatus,
            nation: this.form.nation,
            politicCountenance: this.form.politicCountenance,
            email: this.form.email,
            phone: this.form.phone,
            address: this.form.address,
            deptId: this.form.deptId,
            positionName: this.form.positionName,
            academicTitle: this.form.academicTitle,
            educationalBackground: this.form.educationalBackground,
            school: this.form.school,
            entryTime: this.form.entryTime,
            status: this.form.status,
            contractTerm: this.form.contractTerm,
            updateBy: localStorage.getItem("uId")
          }
        }).then((response) => {
          if (response.data.msg == "更新成功！") {
            this.$message.success(response.data.msg);
            this.clearValue()
            this.editdialog = false;
            this.getTableDate(this.pageSize, this.current);
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 清空弹层值
       */
      clearValue() {
        Object.keys(this.form).forEach((key) => (this.form[key] = ''))
      },
      /**
       * 获取全部部门
       */
      getDept() {
        this.$axios({
          method: 'post',
          url: 'http://127.0.0.1:8080/dept/listAllDeptName',
        }).then((response) => {
          this.deptList = response.data.data;
        }).catch((error) => {
          console.log(error)
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        if (res.msg == "上传成功!") {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG ,PNG格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    created() {
      /**
       * 页面渲染调用一次获取表格
       */
      this.getTableDate(this.pageSize, this.current);
      this.getDept();

    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  #ep{
    width: 50px;
    height: 50px;
  }
</style>
